<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=format-detection content="telephone=no">
    <meta name=format-detection content="email=no">
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name=apple-mobile-web-app-status-bar-style content=black>
    <meta name=full-screen content=yes>
    <meta name=browsermode content=application>
    <meta name=x5-orientation content=portrait>
    <meta name=x5-fullscreen content=true>
    <meta name=x5-page-mode content=app>
    <meta content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width"
          name="viewport">
    <title>签到有礼</title>
    <script src="/common/vue.min.js"></script>
    <script src="/common/jquery.min.js"></script>
    <script src="/common/axios.min.js"></script>
    <link rel="stylesheet" href="/wap/activity/dynamic/sign/index.css">
</head>
<body>
<div id="sign">
    <div class="head clear">
        <header v-text="currentDate"></header>
        <section>
            <ul class="headUl clear">
                <li>日</li>
                <li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
            </ul>
            <ul class="sectionUl clear">
                <li v-for="item in contents.list">
                    <div v-if="item.sign === 0" v-text="item.day"></div>
                    <div v-if="item.sign === 1" class="active" v-text="item.day"></div>
                </li>
            </ul>
        </section>
        <footer>
            <span class="bot" v-if="signs === 0" @click="signUp">签到</span>
            <span class="bot active" v-else-if="signs === 1">已签到</span>
            <span class="bot active" v-else-if="signs === 2">请登录</span>
            <span class="tit">温馨提示:达到累计天数后,请点击礼品盒奖励哦!</span>
        </footer>
    </div>
    <div class="lottery">
        <header>签到奖励</header>
        <section>
            <div class="hr">
                <span class="hr-y"></span>
                <span class="hr-y"></span>
                <span class="hr-y"></span>
                <span class="hr-y"></span>
            </div>
            <div class="hr-text">
                <header>
                    <span>10积分</span>
                    <span>100积分</span>
                    <span>200积分</span>
                    <span>500积分</span>
                </header>
                <footer>
                    <span>1天</span>
                    <span>7天</span>
                    <span>15天</span>
                    <span>25天</span>
                </footer>
            </div>
            <span class="hr-a" id="hr_a"></span>
        </section>
    </div>
    <div class="footer">
        <header>活动规则</header>
        <section>
            <p><b>活动内容：</b>活动期间，每天可签到1次，累计达到相应次数即可点击页面礼品盒抽奖。签到累计次数当月有效，跨月重新计算。当月累计签到1次可抽取10积分奖品；累计签到7次可获取100积分；累计签到15次可获取200积分；累计25次可获取500积分。
            </p>
            <p><b>活动注意事项：</b></p>
            <ul>
                <li>1、同一设备或同一手机号每天仅可签到1次，奖品仅能获取1次。</li>
                <li>2、如发现用户通过不正当途径参加本活动，我公司有权终止该客户参加本次活动并取消其
                    获奖资格；凡参与本活动者，即视为接受活动所有规则，且须遵守股神学院APP的法律声明及其他关于营销活动的相关规定，有权在法律允许的范围内对活动规则作出适当调整。
                </li>
            </ul>
        </section>
    </div>
</div>
<script th:inline="javascript">
    var baseUrl = [[${baseUrl}]];
</script>
<script src="/wap/activity/dynamic/sign/index.js"></script>
<script>
    var sign = new Vue({
        el: '#sign',
        data: {
            contents: {},
			signs: 2,
            currentDate: new Date().getFullYear() + '年' + (new Date().getMonth()+ 1) + '月' + new Date().getDate() + '日'
        },
        methods: {
            /*页面数据获取*/
            getNew: function () {
                var _this = this;
                axios.post(baseUrl + 'api/app/sign/list/month', {}).then(function (response) {
                    if (response.data.code === 20000) {
                        _this.contents = response.data.data;
                        document.getElementById('hr_a').style.width = ((response.data.data.totalSign / 30) * 100) + '%';
                        if (response.data.data.totalSign >= 1) {
                            document.getElementsByClassName('hr-y')[0].style.background = '#f96b80'
                        }
                        if (response.data.data.totalSign >= 7) {
                            document.getElementsByClassName('hr-y')[1].style.background = '#f96b80'
                        }
                        if (response.data.data.totalSign >= 15) {
                            document.getElementsByClassName('hr-y')[2].style.background = '#f96b80'
                        }
                        if (response.data.data.totalSign >= 25) {
                            document.getElementsByClassName('hr-y')[3].style.background = '#f96b80'
                        }
                        if(!GetQueryString("token")) {
                            _this.signs = 2;
                        } else {
                            _this.signs = response.data.data.isSignTody;
                        }
                    } else {
                        _this.signs = 2;
                    }
                    console.log(_this)
                }).catch(function (error) {
                    console.log(error);
                });
            },
            signUp: function () {
                var _this = this;
                axios.post(baseUrl + 'api/app/sign/in/', {}).then(function (response) {
                    if (response.data.code === 20000) {
                        _this.getNew();
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            }
        },
        created: function () {
            this.getNew();
        },
        updated: function () {
        }
    });
</script>
</body>
</html>